import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { apiSafe, type Meta } from "@/lib/api";
import { PartyLogo } from "@/components/party";
import { Badge, Card, Empty } from "@/components/ui";
import { PARTY_IDS, partyVar, partyName } from "@/lib/parties";

export const revalidate = 300;

interface Proposals { proposals: { id: number; party: string; topic: string; topicLabel: string; subtopic: string | null; proposal: string; position: string | null; direction: string | null; magnitude: string | null; page: number | null; quote: string; confidence: number; document: { id: number; title: string | null; url: string | null; type: string | null } }[] }

export async function generateMetadata({ params }: { params: Promise<{ topic: string }> }): Promise<Metadata> {
  const { topic } = await params;
  const meta = await apiSafe<Meta>("/api/meta");
  const label = meta?.topics[topic];
  return { title: label ? `${label} — positions des partis` : "Enjeu", description: `Ce que proposent les partis sur ${label ?? "cet enjeu"} d'après leurs documents officiels, avec page et citation.` };
}

export default async function Page({ params }: { params: Promise<{ topic: string }> }) {
  const { topic } = await params;
  const [meta, data] = await Promise.all([apiSafe<Meta>("/api/meta"), apiSafe<Proposals>(`/api/proposals?topic=${topic}&limit=400`)]);
  if (!meta || !meta.topics[topic]) notFound();
  if (!data) return <Empty title="Indisponible" />;
  const by: Record<string, Proposals["proposals"]> = {};
  data.proposals.forEach((p) => { (by[p.party] ??= []).push(p); });
  return (
    <div className="space-y-6">
      <div><Link href="/enjeux" className="text-[12.5px] text-ink-3 hover:text-ink">← Enjeux</Link><h1 className="display text-[36px] md:text-[48px] mt-2">{meta.topics[topic]}</h1><p className="text-ink-2 mt-2 text-[15px]">{data.proposals.length} propositions extraites des documents officiels. L&apos;absence d&apos;un parti signifie qu&apos;aucun document ingéré n&apos;aborde le sujet.</p></div>
      <div className="grid lg:grid-cols-5 gap-3">
        {PARTY_IDS.map((id) => (
          <div key={id} className="space-y-2">
            <div className="flex items-center gap-2 pb-2 border-b-2" style={{ borderColor: partyVar(id) }}><PartyLogo id={id} height={16} /><span className="font-semibold text-[13px]">{partyName(id)}</span><span className="num text-[12px] text-ink-3 ml-auto">{by[id]?.length ?? 0}</span></div>
            {(by[id] ?? []).length === 0 && <div className="text-[12.5px] text-ink-3 p-2">Aucune proposition documentée.</div>}
            {(by[id] ?? []).map((p) => (
              <Card key={p.id} className="!p-3 text-[12.5px] leading-snug" >
                <div className="font-medium">{p.proposal}</div>
                {p.magnitude && <div className="num text-ink-2 mt-1">{p.magnitude}</div>}
                <blockquote className="mt-2 italic text-ink-2 border-l-2 pl-2" style={{ borderColor: partyVar(id) }}>« {p.quote.length > 240 ? p.quote.slice(0, 240) + "…" : p.quote} »</blockquote>
                <div className="mt-2 flex items-center justify-between gap-2 text-[11.5px] text-ink-3"><Link href={`/documents/${p.document.id}#p${p.id}`} className="link truncate">{p.document.title ?? "Document"}</Link><span className="num shrink-0">{p.page ? `p. ${p.page} · ` : ""}{Math.round(p.confidence * 100)} %</span></div>
                {p.direction && p.direction !== "neutre" && <div className="mt-1.5"><Badge>{p.direction.replace(/_/g, " ")}</Badge></div>}
              </Card>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}